// @import "../common/common";
$text_default:#3399ff;
.mf-tabs {
    width: 100%;
    background-color: #fff;
    z-index: 10;
    span {
        line-height: rem(80);
    }
    &-bar {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        position: relative;
    }
    &-tab {
        flex: 1;
        text-align: center;
        height: 100%;
        cursor: pointer;
        span {
            line-height: rem(80);
        }
        span:hover {
            color: $text_default;
        }
    }
    &-tab-active {
        span {
            color: $text_default;
        }
    }
    &-fix-bar {
        position: fixed;
        bottom: 0;
        border-top: 1px solid #f0f0f0;
    }
    &-absolute-bar {
        position: absolute;
    }
    &-sticky-bar {
        position: sticky;
        top: 0;
        border-bottom: 1px solid #f0f0f0;
    }
}

.pane {
    width: 100%;
    // transform: translateX(-100%);
    // transition: all 0.5s ease-in;
    visibility: hidden;
    animation: slideInLeft-leave .3s;
}

.pane-active {
    visibility: visible;
    // transform: translateX(0);
    animation: slideInLeft-enter .3s;
}

#mf-tabs-tips {
    position: absolute;
    bottom: 0;
    height: rem(3);
    width: rem(20);
    background-color: $text_default;
    -webkit-transition: left 500ms;
    -moz-transition: left 500ms;
    -ms-transition: left 500ms;
    -o-transition: left 500ms;
    transition: left 500ms;
}

// ===
.slideInRight-transition,
.slideInLeft-transition {
    display: inline-block;
}

.slideInRight-enter {
    animation: slideInRight-enter .3s;
}

.slideInRight-leave {
    position: absolute;
    left: 0;
    right: 0;
    animation: slideInRight-leave .3s;
}

.slideInLeft-enter {
    animation: slideInLeft-enter .3s;
}

.slideInLeft-leave {
    position: absolute;
    left: 0;
    right: 0;
    animation: slideInLeft-leave .3s;
}

@keyframes slideInRight-enter {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
    to {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes slideInRight-leave {
    0% {
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0
    }
}

@keyframes slideInLeft-enter {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    to {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes slideInLeft-leave {
    0% {
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0
    }
}